<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/list.css" />
	</head>
	<body>
		<div class="container">
			<div class="layui-form search-container">
				<div class="layui-inline">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" autocomplete="off" placeholder="请输入" id="titleInput">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">分类</label>
					<div class="layui-input-inline">
						<select name="type" lay-verify="" >
						  <option value="">请选择</option>
						  <option value="网络">网络</option>
						  <option value="其它">其它</option>
						</select> 
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">标签</label>
					<div class="layui-input-inline">
						<select name="type" lay-verify="" >
						  <option value="">请选择</option>
						  <option value="疑难问题">交换机</option>
						  <option value="疑难问题">疑难问题</option>
						</select> 
					</div>
				</div>
				<a href="javascript:;" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-search"></i>查询</a>
			</div>
			<div class="btn-container"><a href="javascript:;" id="addBtn" class="layui-btn layui-btn-sm">添加</a></div>
			<table id="list" lay-filter="list"></table>
		</div>
		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script src="../../js/common.js"></script>
		<script>
			var data = [
						{id:1,title:'交换机端口指示灯快速闪烁',type:'网络',sign:['交换机','疑难问题'],time:'2019.4.11 16.23',creater:'刘艾',importance:3,count:11,state:2}
						,{id:1,title:'交换机端口指示灯快速闪烁',type:'网络',sign:['交换机','疑难问题'],time:'2019.4.11 16.23',creater:'刘艾',importance:5,count:121,state:2}
					];
			layui.use(['table'],function(){
				var table = layui.table;
				//第一个实例
				  table.render({
					elem: '#list'
					,height: '300'
					,url: '' //数据接口
					,page: true //开启分页
					,cols: [[ //表头
					  {field: 'xh', title: '序号', width:80,align:'center'
					  ,templet:function(d){
						  return d.LAY_INDEX;
					  }}
					  ,{field: 'title', title: '标题',align:'center'}
					  ,{field: 'type', title: '分类', align:'center'}
					  ,{field: 'sign', title: '标签',align:'center'
					  ,templet:function(d){
						  var spanClass = ['lightblue','yellow'];
						  var str = '';
						  for(var i in d.sign){
							str += `<span class="sign-style ${spanClass[i%spanClass.length]}" >${d.sign[i]}</span>`;  
						  }
						  return str;
					  }} 
					  ,{field: 'time', title: '更新时间', align:'center'}
					  ,{field: 'creater', title: '发布人', align:'center'}
					  ,{field: 'importance', title: '重要性',align:'center'
					  ,templet:function(d){
						  var str = '';
						  for(var i =0;i<d.importance;i++){
							  str += '<i class="layui-icon layui-icon-rate-solid" style="color:#ff5722"></i> '
						  }
						  return str;
					  }}
					  ,{field: 'count', title: '阅读数', align:'center'}
					  ,{field: 'state', title: '状态', align:'center'
					  ,templet:function(d){
						var arr = ['待修改','已发布','已报废'];
						var colors = ['layui-btn layui-btn-warm layui-btn-xs','layui-btn layui-btn-xs','layui-btn layui-btn-primary layui-btn-xs']
						return `<span class="${colors[d.state]}">${arr[d.state]}</span>`
					  }}
					  ,{field: 'opt', title: '操作', width: 160,align:'center'
					  ,templet:function(d){
						  return `<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs"><i class="layui-icon layui-icon-edit"></i>编辑</a>
						  &nbsp;<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>`
					  }}
					]]
					,data: data
				  });
			})
			$(function(){
				$("#addBtn").click(function(){
					top.tabAdd('添加知识','knowledge_add','pages/knowledge/knowledge_add.html',true,true);
					
				})
			})
		</script>
	</body>
</html>
